<template>
    <div class = 'city' v-if = 'isclick'>
        <div class = 'Ctop'>
                <div>
                   <div class = 'pos'>
                       <div @click = 'click'>
                           <div>{{result}} </div>
                           <i class = 'iconfont icon-xiajiantou up'></i>
                       </div>
                   </div>
                   <i>当前城市 - {{result}}</i>
                </div>
        </div>
        <div class = 'search'>
            <i class = 'iconfont icon-sousuo'></i>
            <input type = 'text' placeholder = '请输入城市名' v-model='inputV' @keydown.enter = 'search' @input = 'input'>
        </div>
        <div class = 'hotCity' v-if = 'issearch'>
            热门城市
            <div>
                <span v-for = '(item,index) in cityName.hot' v-bind:key="index" @click = 'cityChoose(item)'>{{item}}</span>
            </div>
            <div class = 'wait' v-if = 'cityName.hot == undefined'>
                <waiting></waiting>
            </div>
        </div>
        <div class = 'allCity' v-if = 'issearch'>
            <div v-for = '(item,index) in cities' v-bind:key="index">
                <div v-show="item.length>0">{{upperLetter[index]}}</div>
                <ul>
                    <li v-for = '(cityItem,ind) in item' @click = 'cityChoose(cityItem.name,cityItem.id)' v-bind:key="ind">{{cityItem.name}}</li>
                </ul>
            </div>
        </div>
        <div class = 'cityFix' v-if = 'issearch'>
            <ul>
                <li :class = '{active : flag == -1}' @click = 'clickTop'>#</li>
                <li v-show="cities[index].length>0" v-for = '(item,index) in upperLetter' :class = '{active : flag == index}' @click = 'letterClick(index)' v-bind:key='index'>{{item}}</li>
            </ul>
        </div>
        <div class = 'search-result' v-if = '!issearch'>
            <span>搜索结果：</span>
            <div v-if = 'searchResult.length == 0' class = 'result-no'>
                暂无数据~
            </div>
            <div  v-if = 'searchResult.length != 0' class = 'result-yes'>
                <ul>
                    <li v-for = '(item,index) in searchResult' @click = 'cityChoose(item.nm)' v-bind:key="index">
                        {{item.nm}}
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>
<script>
import waiting from '@/components/waiting.vue';
export default{
    data(){
        return {
            cityName : [],
            letter : ['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z'],
            upperLetter : [],
            cities : [],
            result : '广州',
            flag : -1,
            inputV : '',
            issearch : true,
            searchResult : [],
            myId : 20,
        }
    },
    components:{
        waiting,
    },
    methods:{
        // 页面隐藏点击事件
        click(){
            this.$emit('child-click',{
                Cclick : false,
                cityResult : this.result,
                cityId : this.myId,
            })
        },
        // #号点击事件
        clickTop(){
            // console.log(document.documentElement.scrollTop)
            this.flag = -1;
            document.documentElement.scrollTop = 0;
        },
        // 首字母导航事件
        letterClick(ind){
            let div = document.querySelectorAll('.allCity>div>div')
            this.flag = ind;
            document.documentElement.scrollTop = div[ind].offsetTop;
            // console.log(ind)
            // console.log(this.cities)
            // this.cities.forEach((element,index) => {
            //     if(this.flag == index){
            //         console.log(index)
            //     }
            // });
        },
        // 输入框回车事件
        search(){
            // console.log(this.inputV)
            if(this.inputV == ''){
                alert('输入框不能为空！');
                return ;
            }
            this.issearch = false;
            this.searchResult = [];
            this.cityName.cts.forEach(element => {
                // console.log(element.nm,element.py)
                if(element.nm.indexOf(this.inputV) != -1 || element.py.indexOf(this.inputV) != -1){
                    this.searchResult.push(element);
                }
            });
            // console.log(this.searchResult)
        },
        // 输入框监听事件
        input(){
            if(this.inputV == ''){
                this.issearch = true;
            }
        },
        // 城市选择的点击事件
        cityChoose(Cname,Cid){
            this.result = Cname;
            if(Cid != undefined){
                this.myId = Cid;
            }else{
                this.cityName.cts.forEach(element => {
                    if(element.nm == Cname){
                        this.myId = element.id
                    }
                });
            }
            localStorage.setItem('cityName',this.result);
            localStorage.setItem('cityId',this.myId);
            this.$emit('child-click',{
                Cclick : false,
                cityResult : this.result,
                cityId : this.myId,
            })
        },
        // init(){
        //     setTimeout(() => {
        //         let div = document.querySelectorAll('.allCity>div')
        //         // console.log(div)
        //         div.forEach((element,index) => {
        //             if(element.childNodes[1].innerHTML == ''){
        //                 // console.log(element)
        //                 element.style.display = 'none';
        //                 document.querySelectorAll('.cityFix>ul>li')[index+1].style.opacity = 'none';
        //             }
        //         });
        //     }, 300);
        // }
    },
    props : {
        isclick : {
            type : Boolean ,
            default : false
        },
        mycity : {
            type : String,
            default : "广州",
        }
    },
    created(){
        let that = this;
        this.result = this.mycity;
        // 获取城市数据
        axios.get('https://apis.netstart.cn/maoyan/cities.json')
           .then(
                data=> {
                    // 全部城市名称
                    this.cityName = data.data;
                    // 自定义26个字母，循环，分类
                    for(let i = 0;i<this.letter.length;i++){
                        // 26个空数组
                        let arr = [];
                        // 转大写
                        let str = this.letter[i].toUpperCase();
                        this.cities.push(arr);
                        this.upperLetter.push(str);
                    }
                    // 遍历全部城市
                    this.cityName.cts.forEach(element => {
                        // console.log(element,element.py[0]);
                        // 分成26个数组
                        for(let i = 0;i<=this.letter.length;i++){
                            // 拼音首字母
                            if(element.py[0] == this.letter[i]){
                                // console.log(this.cities[i][element.py[0]])
                                let obj = {};
                                obj.name = element.nm;
                                obj.id = element.id;
                                // 一个大数组，包含26个小数组，每个数组有多个对象，对象里有城市名和id
                                this.cities[i].push(obj);
                                // console.log(this.letter[i],element.py[0]);
                                break;
                            }
                        }
                    });
                    // console.log(this.cities);
                    // this.init();
                }
            )
            // 鼠标滚轮事件
            window.onscroll = function() {
                // 获取滚动高度
                let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                let cityFix = document.querySelector('.cityFix');
                let div = document.querySelectorAll('.allCity>div>div')
                if(cityFix != undefined){
                    // 遍历26个div标签
                    for(let index = 0;index<div.length;index++){
                        // console.log(div[index].offsetTop,arr) 
                        let ele = div[index-1] || 0;
                        // 空标签的offsetTop为0
                        let height = ele != 0 ? ele.offsetTop : 0
                        if(index != 0){
                            let ind = index;
                            // 当height为0时，等于上一个标签的offsetTop
                            while(height == 0){
                                height = div[ind-1].offsetTop;
                                ind--;
                            }
                        }
                        // console.log(height)
                        // console.log(scrollTop,div[index].offsetTop)
                         if(scrollTop >= height-20 && scrollTop < div[index].offsetTop){
                            // console.log(div[index-1].offsetTop)
                            if(div[index-1]){
                                if(div[index-1].offsetTop == 0){
                                    let ind = index;
                                    while(div[ind-1].offsetTop == 0 ){
                                        ind -- ;
                                    }
                                    that.flag = ind-1;
                                }
                            }
                            else{
                                that.flag = index-1;
                            }
                            // console.log(that.flag,index)
                            break;
                        }else if(scrollTop >= div[index].offsetTop){
                                that.flag = index;
                        }
                    }
                    // console.log(that.flag);
                }
        }
    },
}
</script>
<style lang = 'scss' scoped>
.city{
    position : absolute;
    top : 50px;
    width : 100%;
    min-height : 100%;
    z-index : 100;
    background-color : #f4f4f4;
    .Ctop{
        width : 100%;
        min-height : 50px;
        line-height: 50px;
        position : fixed;
        top : 0;
        background-color : white;
        z-index : 99;
        >div{
            position:relative;
            text-align:center;
            height : 40px;
            .pos{
                position : absolute;
                top : 10px;
                left : 10px;
                z-index : 99;
                width : 60px;
                height : 30px;
                text-align : center;
                line-height : 30px;
                font-size : 8px;
                >div{
                    >div{
                        margin : 0 auto;
                        width : 40px;
                        height : 30px;
                        overflow:hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                    }
                    .icon-xiajiantou.up{
                        position : absolute;
                        top : 0;
                        right : 0px;
                        display : inline-block;
                        transform : rotateX(180deg);
                    }
                }
                
            }
            >i{
                font-size : 20px;
                color : #374140;
            }
        }
    }
    .search{
            background-color : white;
            height : 30px;
            margin : 10px auto;
            width : 90%;
            border-radius : 5px;
            position : relative;
            input{
                position: absolute;
                top : 5px;
                outline : none;
                margin : 0;
                padding-left : 30px;
                border : 0;
                width : 100%;
                z-index : 2;
            }
            i{
                position: absolute;
                top : 7px;
                left : 7px;
                z-index : 3;
            }
    }
    .hotCity{
        background-color :white;
        padding: 10px;
        font-size : 18px;
        color : grey;
        border-radius : 5px;
        >div{
            padding-top : 10px;
            span{
                display:inline-block;
                width : 20%;
                height : 35px;
                text-align : center;
                line-height : 35px;
                margin : 5px 8px;
                color : black;
                background-color : #f4f4f4;
                font-size : 16px;
            }
        }
        .wait{
            text-align : center;
        }
    }
    .allCity{
        >div{
            >div{
                height : 30px;
                line-height : 30px;
                padding-left : 10px;
                font-size : 18px;
                color : grey;
            }
            
            ul{
                li{
                    padding : 10px 20px;
                    background-color : white;
                    margin : 2px 0;
                    border-radius : 5px;
                }
            }
        }
        
    }
    .cityFix{
        position : fixed;
        top : 16%;
        right : 2px;
        ul{
            li{
                text-align : center;
                font-size : 14px;
            }
            li.active{
                background-color : skyblue;
            }
        }
    }
    .search-result{
        font-size : 18px;
        padding-top : 10px;
        >div{
            margin-top : 20px;
        }
        .result-no{
            height : 100px;
            line-height : 100px;
            text-align : center;
        }
        .result-yes{
            ul{
                li{
                    background-color : white;
                    padding : 10px 20px;
                    border-radius : 5px;
                    margin : 2px 0;
                    color : #004358;
                }
            }
        }
    }
}
</style>